<template>
	<i-shopCar @submit="shopSubmit"></i-shopCar>
	<i-drawer v-model="showShop" :diySlot="true" :mask="false">
		<view class="shop_specs">
			<image src="../../static/images/close_gray_icon.png" @click="showShop = false"></image>
			<view class="shop_price">
				<i-price :size="28">{{goodData.sellAmt}}</i-price>
				<text class="not_price">￥{{goodData.priceAmt}}</text>
			</view>
			<view class="signal">
				<view class="signal_title">型号</view>
				<view class="tags">
					<i-tag @click="selectSku(i, v)" right="20rpx" bottom="20rpx" :key="v" v-for="(i, v) in goodData.skuVos"
						radius="32rpx" :bgColor="active === v ? 'rgba(251, 101, 46, 0.10)' : '#F3F4F5'"
						:color="active === v ? '#FB652E' : '#16161F'"
						:border="active === v ? '1rpx solid #FB652E': '1rpx solid #f3f4f5'" size="26rpx"
						padding="14rpx 40rpx">{{i.skuName}}</i-tag>
				</view>
			</view>
			<view class="signal">
				<view class="signal_title">规格</view>
				<view class="tags">
					<i-tag @click="selectShop(i, v)" right="20rpx" bottom="20rpx" :key="v" v-for="(i, v) in goodData.skuVos?.[active].skuBaseVoList"
						radius="32rpx" :bgColor="activeSku === v ? 'rgba(251, 101, 46, 0.10)' : '#F3F4F5'"
						:color="activeSku === v ? '#FB652E' : '#16161F'"
						:border="activeSku === v ? '1rpx solid #FB652E': '1rpx solid #f3f4f5'" size="26rpx"
						padding="14rpx 40rpx">{{i.volume}}L</i-tag>
				</view>
			</view>
			<view class="" style="height: 120rpx"></view>
			<i-buttons color="#fff" bgColor="#FB652E" padding="18rpx 0" radius="4" size="32" @click="submit">确定
			</i-buttons>
		</view>
	</i-drawer>
	<i-vipBg :price="fixed((shopForm.allPrice - shopForm.allDiscountPrice), 2)"  @confirm="confirm" v-model="showBg" :originalPrice="shopForm.allPrice"></i-vipBg>
	<view class="shop_detail">
		<view class="close">
			<image src="../../static/images/back_black_icon.png" mode="" @click="navTo('','navigateBack')"></image>
		</view>
		<scroll-view scroll-y="true" class="scroll-view">	
		<view class="banner">
			<swiper class="swiper" indicator-color="rgba(255, 255, 255, 0.5)" indicator-active-color="#fff"
				:indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for="(item, index) in goodData.bannerImages" :key="index">
					<view class="swiper-item">
						<image :src="item" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<i-card top="20rpx">
			<view class="detail_shop">
				<view class="shop_left">
					<view class="shop_title">
						{{goodData.oilName}}
					</view>
					<view class="tag" v-if="goodData.oilLabel">
						<i-tag v-for="(item,index) in goodData.oilLabel.split(',')" :key="index" color="#FF3D3D"
							bgColor="#fff" border="1rpx solid #FF3D3D" padding="0 6rpx" size="22rpx">
							{{item}}
						</i-tag>
					</view>
					<view class="goodsPrice">
						<i-price :size="28">{{goodData.sellAmt}}</i-price>
						<text>￥{{goodData.priceAmt}}</text>
					</view>
				</view>
				<view class="storeItem_right">
					<view class="num" v-if="num">{{num}}</view>
					<i-buttons color="#FB652E" bgColor="rgba(251, 101, 46, 0.1)" border="none" @click="goShop" :wait="300">添加</i-buttons>
				</view>
			</view>
		</i-card>
		<i-card top="20rpx" padding="24rpx 32rpx">
			<view class="shop_text">
				<view></view>
				商品详情
				<view></view>
			</view>
			<view class="conent_body">
				<image v-for="(item, index) in goodData.descImages" :key="index" :src="item" mode="widthFix"></image>
			</view>
		</i-card>
		<view style="height: 220rpx"></view>
		</scroll-view>
	</view>
</template>

<script lang="ts" setup>
	import {
		computed,
		ref
	} from "vue";
	import {
		navTo,
		fixed
	} from '../../utils/common'
	import useStore from '../../stores/index'
	import {
		getOilDetail
	} from '../../api/shopping'

	import {
		onLoad
	} from '@dcloudio/uni-app'

	const store = useStore()
	const showShop = ref(false)
	const showBg = ref(false)

	const goodData = ref < any > ({})
	const activeSku = ref(0)
	const active = ref(0)
	const activeCode = ref('')
	const activeItem = ref < any > ({})
	
	const storeId = ref('')
	const activeSkuName = ref('')

	onLoad((option) => {
		if (option.oilId && option.storeId) {
			storeId.value = option.storeId
			getPageData(option.oilId, option.storeId)
		}
	})
	
	const userInfo = computed(() => {
		return store.userInfo
	})
	const shopForm = computed(() => {
		return store.shopForm
	})
	
	const num = computed(() => {
		const list = shopForm.value.shopList.filter(item => (item.oilId && item.oilId === goodData.value.id)) || []
		if (!list.length) {
			return 0
		}
		const nums = list.length > 1 ? list.reduce((callback, current) => {
			return typeof callback === 'number' ? callback + current.dataNum : (callback.dataNum + current.dataNum)
		}) : list[0].dataNum
		return  nums
	})


	const goShop = () => {
		showShop.value = true
	}
	const getPageData = async (oilId: string, storeId: string) => {
		const {
			data
		} = await getOilDetail({
			oilId,
			storeId
		})
		goodData.value = data
		activeCode.value = data.skuVos[0]?.skuBaseVoList[0]?.id
		activeItem.value = data.skuVos[0]?.skuBaseVoList[0]
		activeSkuName.value = data.skuVos[0]?.skuName
	}
	
	const selectSku = (i: {skuName: string}, v: number) => {
		
		activeSkuName.value = i.skuName
		active.value = v
		activeCode.value = goodData.value.skuVos[v]?.skuBaseVoList[activeSku.value]?.id
		activeItem.value = goodData.value.skuVos[v]?.skuBaseVoList[activeSku.value]
		goodData.value.priceAmt = goodData.value.skuVos[v]?.skuBaseVoList[activeSku.value]?.priceAmt
		goodData.value.sellAmt = goodData.value.skuVos[v]?.skuBaseVoList[activeSku.value]?.sellAmt
		goodData.value.discountAmount = goodData.value.skuVos[v]?.skuBaseVoList[activeSku.value]?.discountAmount
	}
	
	const selectShop = (data: {id: string, priceAmt: number, sellAmt: number,discountAmount: number}, i: number ) => {
		activeSku.value = i
		activeCode.value = data.id
		activeItem.value = data
		goodData.value.priceAmt = data.priceAmt
		goodData.value.sellAmt = data.sellAmt
		goodData.value.discountAmount = data.discountAmount
	}
	const submit = () => {
		store.addShopForm({
			serviceId: activeCode.value,
			price: goodData.value.priceAmt,
			discountPrice: goodData.value.sellAmt,
			serviceName: goodData.value.oilName,
			oilId: goodData.value.id,
			volume: activeItem.value.volume,
			skuName: activeSkuName.value,
			businessType: '10003007'
		})
		showShop.value = false
	}
	
	const shopSubmit = () => {
		if (Number(userInfo.value.accountAmount) <  (shopForm.value.allPrice - shopForm.value.allDiscountPrice) ) {
			showBg.value = true
			return
		}
		store.setGoodOrder({...shopForm.value, discountPrice: shopForm.value.allDiscountPrice})
		navTo(`/pages/views/cashier?type=store`, 'navigateTo')
	}
	const confirm = () => {
		store.setGoodOrder({...shopForm.value, discountPrice: shopForm.value.allPrice})
		navTo(`/pages/views/cashier?type=store`, 'navigateTo')
	}
	
</script>

<style lang="scss" scoped>
	.shop_detail {
		width: 100%;
		background-color: $backColor;
		height: 100vh;
		overflow: hidden;
		.scroll-view {
			height: calc(100vh - 64px);
		}

		.banner {
			width: 750rpx;
			height: 750rpx;

			.swiper {
				width: 750rpx;
				height: 750rpx;
			}
		}

		.close {
			@include flexR;
			position: fixed;
			top: var(--status-bar-height);
			left: 32rpx;
			z-index: 96;
			height: 44px;
			width: 100%;

			image {
				width: 64rpx;
				height: 64rpx;
			}

			// @include 
		}

		.swiper-item {
			width: 100%;
			height: 100%;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.detail_shop {
			@include flexRS;
			align-items: flex-end;

			.shop_left {
				@include flexC;

				.goodsPrice {
					@include flexR;
					align-items: flex-end;

					text {
						text-decoration: line-through;
						@include dprice(26rpx);
						color: #A0A0AD;
						margin-bottom: 2rpx;
						margin-left: 8rpx;
					}
				}

				.tag {
					margin-bottom: 16rpx;
				}
			}

			.shop_right {
				@include flexC;
				align-items: flex-end;
				@include dfont(26rpx);
				color: #A0A0AD;

				.price {
					@include dprice(36rpx);
				}
			}
		}

		.shop_title {
			margin-bottom: 16rpx;
			@include titlefont(32rpx);
		}

		.conent_body {
			@include flexCC;

			image {
				width: 100%;
			}
		}

		.shop_text {
			@include flexRC;
			@include dfont;
			color: #A0A0AD;
			@include dWeight;
			white-space: nowrap;
			margin-bottom: 24rpx;

			view {
				width: 40%;
				height: 1rpx;
				background: #E6E6F0;
				margin: 0 24rpx;
			}
		}

		.bottom {
			position: fixed;
			bottom: 0;
			width: 100%;
			background-color: #fff;
			padding: 20rpx 0 40rpx 0;

			.bottoms {
				padding: 0 32rpx;
			}
		}
	}

	.shop_specs {
		width: 100%;
		border-radius: 16rpx 16rpx 0rpx 0rpx;
		background-color: #fff;
		padding: 48rpx 32rpx;
		position: relative;

		image {
			position: absolute;
			width: 48rpx;
			height: 48rpx;
			right: 40rpx;
			top: 40rpx;
		}

		.shop_price {
			@include flexCC;
			margin-bottom: 36rpx;

			.not_price {
				@include dprice(26rpx);
				color: #A0A0AD;
				margin-top: 8rpx;
				margin-left: 8rpx;
				text-decoration: line-through;
			}
		}

		.signal {
			margin-bottom: 32rpx;

			.signal_title {
				@include titlefont(26rpx);
				margin-bottom: 32rpx;
				@include dWeight;
			}
		}

	}
	.storeItem_right {
		position: relative;
	
		.num {
			top: -10rpx;
			right: -10rpx;
			width: 40rpx;
			height: 40rpx;
			@include flexRC;
			@include dfont(24rpx);
			position: absolute;
			border-radius: 50%;
			background-color: $dcolor;
			color: #fff;
			z-index: 9;
		}
	}

	.goodVip {
		width: 140rpx;
		height: 36rpx;
		margin-bottom: 16rpx;
	}

	.lines {
		margin: 32rpx 0;
		height: 1rpx;
		background: $background-color;
	}

	.message {
		@include dfont(26rpx);
		color: #A0A0AD;
		margin-bottom: 20rpx;
	}
</style>
